import React, { useEffect, useState } from "react";
import { Button, Col, Form, Input, message, Modal, Radio, Row, Select, TreeSelect } from 'antd';
import { deptTreeSelect } from "@/api/system/dept.ts";
import { setKeyUtils } from "@/utils/Z.ts";
import { addUser, getUser, updateUser } from "@/api/system/user.ts";
import styles from "./index.module.css";
import { globalMessage } from "@/utils/message";
import { getOperlog } from "@/api/system/monitor/operlog";


// 定义组件的 props 类型
interface MyComponentProps {
    open: boolean;
    title?: string;
    OnCanCle: () => void;
    operId?: number;

}
interface formDataType {
    title?: string;
    operUrl?: string;
    operName?: string;
    operIp?: string;
    operLocation?: string;
    requestMethod?: string;
    method?: string;
    operParam?: string;
    jsonResult?: string;
    status?: number;
    operTime?: string;
    errorMsg?: string;


}

const EditOperlogDetailView: React.FC<MyComponentProps> = (props) => {
    const [form] = Form.useForm();
    const [deptOptions, setDeptOptions] = useState<any[]>([]);
    // 表单的值
    const [formData, setFormData] = useState<formDataType>({})
    // 岗位下来数据
    const [postOptions, setPostOptions] = useState([])
    // 角色下拉数据
    const [roleOptions, setRoleOptions] = useState([])


    function handleCancel() {
        props.OnCanCle()
    }

    useEffect(() => {
        if (props.operId) {
            getList(props.operId)
        }


    }, [props.operId]);
    const getList = (id?: number) => {

        getOperlog(id).then((res: any) => {
            if (res?.code === 200) {
                setFormData(res.data)

            }
        });

    };


    return (
        <>
            <Modal
                forceRender
                open={props.open}
                title={props.title}
                footer={null}
                width={800}
                onCancel={() => {
                    props.OnCanCle()
                }}
            >
                <Form form={form}
                    name="edituser"
                    style={{ maxWidth: 1000 }}>
                    <Row gutter={10}>
                        <Col span={12}>
                            <Form.Item
                                label="操作模块"                            >
                                {formData.title}
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Form.Item
                                label="请求地址"
                            >
                                {formData.operUrl}
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Form.Item
                                label="登录信息">
                                {formData.operName} / {formData.operIp}/ {formData.operLocation}
                            </Form.Item>
                        </Col>

                        <Col span={12}>
                            <Form.Item
                                label="请求方式"
                            >
                                {formData.requestMethod}
                            </Form.Item>
                        </Col>


                        <Col span={24}>
                            <Form.Item
                                label="操作方法"
                            >
                                {formData.method}
                            </Form.Item>
                        </Col>
                        <Col span={24}>
                            <Form.Item
                                label="请求参数">
                                {formData.operParam}
                            </Form.Item>
                        </Col>
                        <Col span={24}>
                            <Form.Item
                                label="返回参数"                            >
                                {formData.jsonResult}
                            </Form.Item>
                        </Col>
                        <Col span={8}>
                            <Form.Item
                                label="操作状态"
                            >
                                {formData.status === 0 ? "正常" : '失败'}
                            </Form.Item>
                        </Col>
                        <Col span={8}>
                            <Form.Item
                                label="消耗时间"
                            >
                                {formData.operTime}
                            </Form.Item>
                        </Col>
                        {formData.status == 1 && <Col span={8}>
                            <Form.Item
                                label="异常信息"
                            >
                                {formData.errorMsg}
                            </Form.Item>
                        </Col>}
                    </Row>
                </Form>
            </Modal>

        </>
    )
};
export default EditOperlogDetailView;
